{% extends 'main_hub/search_base.html' %}
{% load static %}

{% block title %}
    搜索
{% endblock %}

{% block content %}
    <div class="container">
        {% if not all_video.object_list %}
            <br>
            <div class="row">
                <div class="col-md-12 text-center">
                    <i class="bi bi-search">查询无果</i>
                </div>
            </div>
            <br>
        {% else %}
            <div class="row">
                {% for video in all_video.object_list %}
                    <div style="margin: 10px">
                        <div class="card" style="width:12rem;">
                            <a href="{% url 'video_detail' video.id %}?video_sub_number=1">
                                <img class="card-img-top" src="{{ MEDIA_URL }}{{ video.image }}" style="width: 12rem">
                            </a>
                            <div class="card-body">
                                <h5 class="card-title info">
                                    <a href="{% url 'video_detail' video.id %}?video_sub_number=1"
                                       style="text-decoration:none;color:black;font-size: 15px;font-weight: bold">
                                        {% if video.name|length > 8 %}
                                            {{ video.name|slice:'0:8' }}...
                                        {% else %}
                                            {{ video.name }}
                                        {% endif %}</a>
                                </h5>
                                <p class="card-text">
                                    {% if video.info|length > 9 %}
                                        {{ video.info|slice:'0:8' }}...
                                    {% else %}
                                        {{ video.info }}
                                    {% endif %}</p>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>

            {#            分页#}
            <div class="row justify-content-center">
                <div class="col-auto" style="margin-top: 50px">
                    <nav aria-label="Page navigation example">
                        <ul class="pagination" style="right:500px">
                            {% if all_video.has_previous %}
                                <li class="page-item">
                                    <a href="?{{ all_video.previous_page_number.querystring }}"
                                       class="page-link" aria-label="Previous">
                                        上一页
                                    </a>
                                </li>
                            {% endif %}
                            {% for page in all_video.pages %}
                                {% if page %}
                                    {% ifequal page all_video.number %}
                                        <li class="page-item">
                                            <a class="page-link" href="?{{ page.querystring }}">{{ page }}</a>
                                        </li>
                                    {% else %}
                                        <li>
                                            <a class="page-link page" href="?{{ page.querystring }}">{{ page }}</a>
                                        </li>
                                    {% endifequal %}
                                {% else %}
                                    <li class="none">...</li>
                                {% endif %}
                            {% endfor %}
                            {% if all_video.has_next %}
                                <li class="page-item">
                                    <a href="?{{ all_video.next_page_number.querystring }}" class="page-link"
                                       aria-label="Next">下一页</a>
                                </li>
                            {% endif %}
                        </ul>
                    </nav>
                </div>
            </div>
        {% endif %}
    </div>
{% endblock %}

